<template>
  <a-card :bordered="false">
    <template #extra>
      <a-space>
        <a-button type="primary" icon="plus" @click="showForm(null)">{{ $t('add') }}{{ $t('log') }}
        </a-button>
        <a-button :icon="loading ? 'loading' : 'reload'" @click="fetchData()"></a-button>
      </a-space>
    </template>

    <a-table size="small" :columns="columns" :data-source="logList" :pagination="{ showSizeChanger: true, showQuickJumper: true, size:'middle', showTotal:(total, range) => `${range[0]}-${range[1]} / ${total}`, current: pageIndex, pageSize: pageSize, total: total, pageSizeOptions:['10','20','30','50','100','1000','2000'], }" :row-key="record => record.logId" :loading="loading" @change="handleTableChange">
      <template slot="logText" slot-scope="text,record">
        <div v-html="text.replace(/\n|\r|(\r\n)/g, '<br />')" :style="record.logLevel === 4 || record.logLevel === 5 ? 'color: #ff4d4f;':''">
        </div>
      </template>
      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
    </a-table>

    <a-modal v-model="editVisible" :maskClosable="false" :title="$t('add') + $t('log')" :confirm-loading="confirmLoading"
             :okText="$t('submit')" @ok="saveForm()">
      <a-form-model ref="updateForm" layout="horizontal" :model="updateForm" autocomplete="off" :rules="updateFormRules">
          <a-form-model-item prop="logText">
            <a-textarea v-model="updateForm.logText" :auto-size="{ minRows: 3, maxRows: 10 }" :placeholder="$t('logText')">
            </a-textarea>
          </a-form-model-item>
      </a-form-model>
    </a-modal>

  </a-card>
</template>

<script>
import {getUpdateLogList, addUpdateLog} from '@/services/updatelog'

export default {
  name: "UpdateLogList",
  props: ['BusinessId', 'LogType'],
  i18n: require('../i18n'),
  data() {
    return {
      searchParams: { BusinessId: this.$props.BusinessId, LogType: this.$props.LogType},
      columns:[
        {
          dataIndex: 'updatedTime',
          align:'center',
          slotName: "updatedTime",
          slots: { title: 'updatedTime' },
        },
        {
          dataIndex: 'updatedByName',
          align: 'center',
          slotName: "updatedByName",
          slots: {title: 'updatedByName'},
        },
        {
          dataIndex: 'logText',
          align: 'left',
          slotName: "logText",
          slots: {title: 'logText'},
          scopedSlots: {customRender: 'logText'},
          ellipsis: false,
          width: '75%',
        },
      ],
      logList: [],
      pageIndex: 1,
      pageSize: 100,
      total: 0,
      loading: false,
      confirmLoading: false,
      editVisible: false,
      updateForm: {},
      updateFormRules: {
        logText: [{required: true, trigger: 'blur',message:' '}],
      },
    }
  },
  methods: {
    fetchData(){
      this.loading = true
      getUpdateLogList(this.pageIndex, this.pageSize, this.searchParams).then(res => {
        const {rows, total} = res.data.data
        this.logList = rows
        this.total = total
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      if (this.pageIndex === pagination.current && this.pageSize === pagination.pageSize)
        return

      this.pageIndex = pagination.current;
      this.pageSize = pagination.pageSize;
      this.fetchData()
    },
    showForm(){
      this.updateForm = { BusinessId: this.$props.BusinessId, LogType: this.$props.LogType, LogText: '', LogSubType: ''}
      this.editVisible = true
    },
    saveForm(){
      this.$refs.updateForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true

          addUpdateLog(this.updateForm).then(res => {
            if (res.data.success) {
              this.$message.success({content: this.$t('submitSuccess')})
              this.editVisible = false
              this.confirmLoading = false
              this.fetchData()
            } else {
              this.$message.error({content: this.$t(res.data.message)})
            }
          }).catch(error => {
            console.log(error)
          })

        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.fetchData();
  },
}
</script>